//
// Defaults
//

html,
body {
    background: transparent;
    min-height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
    position: relative;
    user-select: none;
}


//
// Panel
//

#root {

    &>.window-base {
        background: var(--tray-background);
        box-shadow: 0.5px 0.5px 0 0.5px var(--tray-border) inset;
        color: var(--tray-text);
        font-family: 'Segoe UI Variable Text', 'Segoe UI';
        width: 100vw;
        box-sizing: border-box;
        padding: 15px 15px 0 15px;
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity 0s, transform 0s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 0.5s, border-color 0.2s, color 0.2s;
        transform: translate(0px, 0px);
        opacity: 1;
        pointer-events: none;
    }

    &[data-visible="true"]>.window-base {
        pointer-events: all;
    }

    &[data-position="TOP"]>.window-base {
        box-shadow: 0.5px -0.5px 0 0.5px var(--tray-border) inset;
        top: auto;
        bottom: 0;
    }

    &[data-position="LEFT"]>.window-base {
        box-shadow: -0.5px 0.5px 0 0.5px var(--tray-border) inset;
    }

    &[data-position="RIGHT"]>.window-base {}

}



@media (prefers-reduced-motion: reduce) {
    #root>.window-base {
        transition: none !important;
    }
}


body[data-acrylic="false"],
body[data-transparent="false"],
body[data-use-native-animation="false"] {
    #root {
        &>.window-base {
            opacity: 0;
            pointer-events: none;
            transform: translateY(120px);
        }

        &[data-visible="true"]>.window-base {
            transition: opacity 0.2s, transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 0.85s, border-color 0.2s, color 0.2s;
            transform: translateY(0%) !important;
            opacity: 1;
            pointer-events: all;
        }

        &[data-position="TOP"]>.window-base {
            border-width: 0 0 1px 1px;
            transform: translateY(-120px);
        }

        &[data-position="LEFT"]>.window-base {
            border-width: 1px 1px 0 0;
            transform: translateX(-120px);
        }

        &[data-position="RIGHT"]>.window-base {
            transform: translateX(120px);
        }
    }
}


//
// Titlebar
//

.titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    margin-bottom: 20px;

    .title {
        font-size: 14.5px;
        font-weight: 400;
    }

    .icons {
        display: flex;
        font-family: "Segoe MDL2 Assets";
        font-size: 22px;

        div {
            cursor: pointer;
            opacity: 0.7;

            &:hover {
                opacity: 1;
            }

            &[data-active="true"] {
                color: var(--system-accent-medium);
                opacity: 1;
            }
        }

        div+div {
            margin-left: 20px;
        }
    }
}


//
// Update bar
//

.updateBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--system-accent-color);
    color: white;
    padding: 15px;
    width: 100%;
    margin: 0px -15px 0px;
    line-height: 1;

    .left {
        font-size: 13px;
        opacity: 0.8;

        &.progress {
            padding-right: 15px;
            width: 100%;
        }
    }

    .right {
        display: flex;
        font-size: 13px;
        align-items: center;

        a {
            cursor: pointer;
            padding: 1px 5px;
            margin: 0px 0;
            font-weight: 500;
            opacity: 1;

            &:hover {
                opacity: 0.8;
            }

            &+a {
                margin-left: 6px;
            }
        }

        .icon {
            margin-bottom: -1px;
        }
    }
}

.progress-bar {
    position: relative;
    width: 100%;
    height: 5px;
    max-width: 320px;
    background: rgba(white, 0.2);

    &>div {
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background: white;
    }
}

.icon {
    font-family: "Segoe MDL2 Assets";
}

.monitor-item {
    margin: 0 !important;
    height: 73px;

    .input--range {
        padding-bottom: 15px;
    }
}

$overlayBarWidth: 11px;
$overlayBarWidthOff: $overlayBarWidth * -0.5;

#root {
    &[data-mode="overlay"] {
        .input--range .progress {
            height: $overlayBarWidth;
            margin-top: $overlayBarWidthOff;
        }

        .input--range .range::-webkit-slider-thumb {
            height: $overlayBarWidth;
            width: $overlayBarWidth;
            border-radius: 0;
            margin-top: 0px;
            background: white;
        }

        .input--range .range::-webkit-slider-runnable-track {
            height: $overlayBarWidth;
            background: #6a6a6a;
        }

        .titlebar {
            display: none;
        }

        .monitor-item .input--range {
            padding-bottom: 15px;
        }

        .monitor-item {
            height: 140px;
            height: 136px;
            width: 40px;
            box-sizing: content-box;
            overflow: visible;
            position: relative;
        }

        &>.window-base {
            border: none;
            border: 0px solid var(--tray-border) !important;
            width: calc(100% - 60px);
            width: auto;
            padding: 2px 13px;
            transition: none !important;
            display: flex;
            background: rgba(19, 19, 19, 0.95) !important;
            box-shadow: none !important;
        }

        .monitor-item .name-row .icon {
            display: none;
        }

        .input--range {
            width: 66px;
            height: $overlayBarWidth;
            overflow: visible;
            position: relative;
            left: 50%;
            margin-left: -8px;
            will-change: transform;
        }

        .input--range .rangeGroup {
            flex: none;
            width: 80px;
            transform: rotate(-90deg) translate(0.5px, 0.5px);
            position: relative;
            top: 53px;
            left: -33.5px;
        }

        .input--range .val {
            font-size: 13px;
            width: 40px;
            padding-right: 4px;
            color: white;

            position: absolute;
            top: 104px;
            left: -21px;
            width: 50px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

        }

        .monitor-item .name-row .title {
            display: none;
            position: absolute;
            top: 108px;
            left: 8px;
            width: 50px;
            font-size: 10px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .updateBar {
            display: none;
        }
    }
}

// Sun Valley tweaks
#root[data-fluent-icons="true"] {

    .titlebar .icons, .icon {
        font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
    }

    &[data-mode="normal"] {
        .monitor-item .name-row {
            margin-bottom: 2px;
            .icon {
                margin-bottom: -2px;
                margin-top: -1px;
            }
        }
        .titlebar .title {
            font-family: "Segoe UI Variable Small";
            font-weight: 300;
            font-size: 13.5px;
        }
        .monitor-item .name-row .title {
            font-family: "Segoe UI Variable Small";
            font-weight: 300;
            font-size: 14.5px;
        }
    }
}